<template>
  <view class="container">
    <!-- 车辆列表 -->
    <view class="car-list">
      <view class="car-item" v-for="(car, index) in cars" :key="index">
        <view class="car-content">
          <!-- 左侧车辆图片 -->
          <image class="car-image" :src="car.photo" mode="aspectFill"></image>
          
          <!-- 右侧信息区域 -->
          <view class="car-info">
            <view class="info-row">
              <text class="label">车型：</text>
              <text class="value">{{vehicleTypes[car.carType]}}-{{vehicleModels[car.carModel]}}</text>
            </view>
            <view class="info-row">
              <text class="label">车牌：</text>
              <text class="value">{{ car.carNumber }}</text>
            </view>
          </view>
        </view>
        
        <!-- 底部操作区 -->
        <view class="car-actions">
          <view class="radio-group">
            <radio :checked="car.carType" color="#3385FE" @click="setDefaultCar(index)" />
            <text class="radio-text">设为默认车辆</text>
          </view>
          <text class="delete-btn" @click="deleteCar(index)">删除</text>
        </view>
      </view>
    </view>

    <!-- 底部添加按钮 -->
    <view class="add-btn" @click="addCar">
      <text class="add-icon">+</text>
      <text>添加车辆</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		vehicleTypes: 
			{ 1: '小型车',
			  2: '中型车',
			  3: '大型车'},
		vehicleModels:
			{ 1: '轿车',
			  2: 'suv',
			  3: '货车'},
		carData:{
			userId:0
		},
      cars: []
    }
  },
  onShow() {
  	this.getList()
  },
  methods: {
	  	getCookie(name) {
	  			    const nameEQ = name + "=";
	  			    const cookies = document.cookie.split(';');
	  			    for (let i = 0; i < cookies.length; i++) {
	  			        let c = cookies[i].trim();
	  			        if (c.indexOf(nameEQ) === 0) {
	  			            return decodeURIComponent(c.substring(nameEQ.length));
	  			        }
	  			    }
	  			    return null;
	  			},
	  getList(){
		let that=this
		const userid = that.getCookie('userid')
		
		if (userid) {
		  console.log('提取的 userId:', userid);
		} else {
		  console.log('Cookie 中未找到 userId');
		}
		console.log(userid)
		that.carData={
			userId:userid
		}
		console.log(that.carData.userId)
		
		 this.$http({
			 url:'/api/user/car/list',
			 method:'get',
			 data:that.carData,
			 success(res){
				 that.cars=res.data.rows
			 }
			 })
		  
	  },
    setDefaultCar(index) {
      this.cars.forEach((car, i) => {
        car.type = i === index
      })
    },
    deleteCar(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该车辆吗？',
        success: (res) => {
          if (res.confirm) {
            this.cars.splice(index, 1)
          }
        }
      })
    },
    addCar() {
      uni.navigateTo({
        url: '/pages/shihao/add-vehicle/add-vehicle'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 30rpx;
}

.car-list {
  .car-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .car-content {
      display: flex;
      margin-bottom: 20rpx;
    }
    
    .car-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: #f5f5f5;
      overflow: hidden;
      flex-shrink: 0;
    }
    
    .car-info {
      flex: 1;
      margin-left: 30rpx;
      
      .info-row {
        margin-bottom: 10rpx;
        
        .label {
          color: #666;
          font-size: 28rpx;
        }
        
        .value {
          color: #333;
          font-size: 28rpx;
        }
      }
    }
    
    .car-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20rpx;
      border-top: 1px solid #eee;
      
      .radio-group {
        display: flex;
        align-items: center;
        
        .radio-text {
          font-size: 28rpx;
          color: #666;
          margin-left: 10rpx;
        }
      }
      
      .delete-btn {
        color: #999;
        font-size: 28rpx;
      }
    }
  }
}

.add-btn {
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  right: 30rpx;
  height: 90rpx;
  background-color: #3385FE;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32rpx;
  
  .add-icon {
    font-size: 40rpx;
    margin-right: 10rpx;
  }
}
</style>
